<template>
  <div>
    <el-row :gutter="10" class="titleBox">
      <el-col :span="3">
        <span>
          <el-checkbox></el-checkbox>
        </span>
      </el-col>
      <el-col :span="6">
        <span>账号：{{titleName}}}</span>
      </el-col>
      <el-col :span="6">
        <span>账户类型：</span>
      </el-col>
      <el-col :span="6">
        <span>签约时间：</span>
      </el-col>
      <el-col :span="3">
        <span><i id="titleIcon" :class="elIconTop" v-if="isShow" @click="clickHandle"></i></span>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  export default {
    name: 'my-collapse',
    props: ['titleName', 'isShow'],
    data() {
      return {
        elIconTop: 'el-icon-caret-bottom'
      }
    },
    methods: {
      clickHandle() {
        console.log(this.isShow)
        if (this.isShow === true) {
          if (this.elIconTop === 'el-icon-caret-bottom') {
            this.elIconTop = 'el-icon-caret-top'
            this.$emit('customer')
          } else {
            this.elIconTop = 'el-icon-caret-bottom'
            this.$emit('customer')
          }
        }
      }
    }
  }
</script>

<style scoped>
  .titleBox {
    border: 1px solid #ddd;
    padding: 10px;
    background: #eee;
  }

  div {
    margin: 0;
    padding: 0;
  }

  #titleIcon {
    font-size: 14px;
    color: rgb(139, 200, 255);
  }
</style>